<template>
  <view class="wrap">
    <view class="box">
      <view class="small">{{ body.name }}</view>
      <view class="desc">群主&合伙人 {{ userTotal.identity1 }} 位，嘉宾 {{ userTotal.identity2 }} 位</view>
      <view class="list">
        <view class="item" v-for="(item,index) in list" :key="index">
          <template v-if="item.user">
            <view class="hd">
              <view class="left">
                <view class="name">
                  <text class="test">{{ item.user.nickname }}</text>
                  <view class="icon" :class="peopleColor[item.identity]">{{ peopleType[item.identity] }}</view>
                </view>
                <view class="questNum">
                  <text class="test">回答了 {{ item.answer_count }} 个问题</text>
                  <uv-icon name="arrow-right" color="#B8B8B8" size='24rpx'></uv-icon>
                </view>
              </view>
              <view class="avatar">
                <image :src="setUrl(item.user.avatar)" mode="aspectFill" class="img"></image>
              </view>
            </view>
            <view class="content">{{ item.user.bio }}</view>
            <button class="btn" hover-class="none" @click="goQuestion(item)">向他提问</button>
          </template>
        </view>
      </view>
    </view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useOrder, useUser } from '@/store';
import { onShow } from '@dcloudio/uni-app';
import { post } from '@/api';
import { toast, setUrl } from '@/common';

let list = ref([]);
let userTotal = ref({
  identity1: 0,
  identity2: 0
})
const peopleType = { 1: '群主', 2: '合伙人', 3: '嘉宾' };
const peopleColor = { 1: 'red', 2: 'yellow', 3: 'blue' }

let body = computed(() => {
  const store = useOrder();
  return uni.$uv.deepClone(store.group);
});
let userInfo = computed(() => {
  const store = useUser();
  return uni.$uv.deepClone(store.userInfo);
});

onShow(() => {
  getList();
})
  
function getList(){
  const params = {
    page: 1,
    limit: 100,
    association_id: body.value.id
  }
  post('api/association_question/askQuestionList', params).then(res => {
    if(res.code == 1){
      const { data } = res.data;
      userTotal.value = {
        identity2: 0,
        identity1: 0,
      }
      data.forEach(e => {
        if(e.identity == 3){
          userTotal.value.identity2++
        }else{
          userTotal.value.identity1++
        }
      })
      console.log(userTotal.value);
      list.value = data;
    }
  })
}
function goQuestion(row){
  if(userInfo.value.user_id == row.user.id) return toast('不能向自己提问');
  uni.navigateTo({
    url: `/pages/group/question/issue?id=${row.user.id}&name=${row.user.nickname}`
  });
}
</script>

<style lang="scss" scoped>
  .box{
    width: 100%;
    padding: 0 30rpx;
    .list{
      padding-bottom: 30rpx;
      .item{
        width: 100%;
        background-image: linear-gradient(180deg, #36383E 0%, #20232B 100%);
        border-radius: 24rpx;
        padding: 30rpx;
        margin-bottom: 24rpx;
        .btn{
          font-size: 34rpx;
        }
        .content{
          font-weight: 400;
          font-size: 28rpx;
          color: #B8B8B8;
          padding-bottom: 40rpx;
        }
        .hd{
          width: 100%;
          padding-bottom: 24rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left{
            .questNum{
              display: flex;
              align-items: center;
              .test{
                font-weight: 400;
                font-size: 28rpx;
                color: #B8B8B8;
                padding-right: 8rpx;
              }
            }
            .name{
              display: flex;
              align-items: center;
              padding-bottom: 15rpx;
              .test{
                font-weight: 500;
                font-size: 32rpx;
                color: #FFFFFF;
                padding-right: 8rpx;
              }
              .icon{
                font-weight: 400;
                font-size: 20rpx;
                color: #FFFFFF;
                height: 32rpx;
                line-height: 32rpx;
                padding: 0 12rpx;
                border-radius: 32rpx;
                &.red{
                  background-color: #E43222;
                }
                &.yellow{
                  background-color: #F0BA16;
                }
                &.blue{
                  background-color: #465B89;
                }
              }
            }
          }
          .avatar{
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            overflow: hidden;
            font-size: 0;
          }
        }
      }
    }
    .desc{
      font-weight: 400;
      font-size: 28rpx;
      color: #737373;
      padding-top: 8rpx;
      padding-bottom: 40rpx;
    }
    .small{
      font-weight: 500;
      font-size: 48rpx;
      color: #333333;
      padding-top: 32rpx;
    }
  }
</style>